<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            font: "微软雅黑";
            font-size: 14px;
        }

        a {
            text-decoration: none;
        }

        ul, li {
            list-style: none;
        }

        #box {
            height: auto;
            width: 550px;
            border: 1px solid #aaa;
            margin: 0 auto;
            overflow: hidden;
        }

        .top {
            height: 40px;
        }

        .top a {
            height: 16px;
            width: 16px;
            display: block;
            float: right;
            margin: 5px;
        }

        .btn-list-off {
            background: #fff url(images/btns.jpg) no-repeat /*@如何定位背景图片@-38px 0px*/ -38px 0px;
        }

        .btn-car-on {
            background: #fff url(images/btns.jpg) no-repeat -21px -34px;
        }

        .btn-list-on {
            background: #fff url(images/btns.jpg) no-repeat -21px 0px;
        }

        .btn-car-off {
            background: #fff url(images/btns.jpg) no-repeat -38px -32px;
        }

        #box ul li {
            height: auto;
            width: 164px;
            border: 1px solid #aaa; /*@问题?如何让每个@float:left*/
            float: left;
            margin: 7px;
        }

        .a-img {
            height: 164px;
            width: 164px;
            display: block;
            overflow: hidden; /*问题overflow：hide，如何隐藏超出部分的图片？overflow:hidden;还有其他什么左右？*/
        }

        p a, p span {
            display: block;
            line-height: 23px;
            padding-left: 10px;
        }

        .bottom {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #ccc;
        }

        .small {
            height: 50px;
            width: 50px; /*问题@float:left;如何让文字从图片下方至图片的右侧呢@*/
            float: left;
            margin: 5px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {   //@@问题：window.onload 的作用是什么？
            //获取按钮
            var listBtn = document.getElementById("btn1");
            var carBtn = document.getElementById("btn2");
            var imgs = document.getElementsByTagName("img");//@@问题：如何获取多个DOM元素？

            listBtn.onclick = function () {
                //改变按钮的class的值                     //@@问题:如何改变一个元素的样式？
                listBtn.className = "btn-list-on";
                carBtn.className = "btn-car-off";
                //改变每一个图片的路径以及它的对应的父节点的class的值
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].src = "./images/small.jpg";				//@@问题，怎么更换一个图片呢？
                    imgs[i].parentNode.className = "a-img small"; //@@问题，怎么获取一个元素的父节点？
                }
            }
            carBtn.onclick = function () {
                //改变按钮的class
                listBtn.className = "btn-list-off";
                carBtn.className = "btn-car-on";
                //改变每一个图片的路径以及它的对应的父节点的class的值
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].src = "./images/big.jpg";
                    imgs[i].parentNode.className = "a-img";
                }
            }


        }

    </script>
</head>

<body>

<div id="box">
    <div class="top">
        <a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
        <a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
    </div>
    <ul>
        <li>
            <div class="con">
                <a href="#" class="a-img ">
                    <img src="images/big.jpg"/>
                </a>

                <p>
                    <a href="#">白阳</a>
                    <span>辽宁</span>
                    <span>21个共同好友</span>
                </p>
            </div>
            <div class="bottom">
                未分组的好友
            </div>
        </li>

        <li>
            <div class="con">
                <a href="#" class="a-img">
                    <img src="images/big.jpg"/>
                </a>

                <p>
                    <a href="#">白阳</a>
                    <span>辽宁</span>
                    <span>21个共同好友</span>
                </p>
            </div>
            <div class="bottom">
                未分组的好友
            </div>
        </li>
        <li>
            <div class="con">
                <a href="#" class="a-img">
                    <img src="images/big.jpg"/>
                </a>

                <p>
                    <a href="#">白阳</a>
                    <span>辽宁</span>
                    <span>21个共同好友</span>
                </p>
            </div>
            <div class="bottom">
                未分组的好友
            </div>
        </li>
        <li>
            <div class="con">
                <a href="#" class="a-img">
                    <img src="images/big.jpg"/>
                </a>

                <p>
                    <a href="#">白阳</a>
                    <span>辽宁</span>
                    <span>21个共同好友</span>
                </p>
            </div>
            <div class="bottom">
                未分组的好友
            </div>
        </li>
        <li>
            <div class="con">
                <a href="#" class="a-img">
                    <img src="images/big.jpg"/>
                </a>

                <p>
                    <a href="#">白阳</a>
                    <span>辽宁</span>
                    <span>21个共同好友</span>
                </p>
            </div>
            <div class="bottom">
                未分组的好友
            </div>
        </li>
        <li>
            <div class="con">
                <a href="#" class="a-img">
                    <img src="images/big.jpg"/>
                </a>

                <p>
                    <a href="#">白阳</a>
                    <span>辽宁</span>
                    <span>21个共同好友</span>
                </p>
            </div>
            <div class="bottom">
                未分组的好友
            </div>
        </li>
    </ul>
</div>
</body>
</html>
